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Hidden Navigation 
and Pop-Out Menus 


Open any mobile app or website these days and you’re likely to find 
menus that are “hidden” at first glance. With just a click, these nav¬ 
igation structures are ready to pop open or slide out, making them 
a popular and common part of mobile website design. 

So popular, in fact, that they’re now getting full-screen treatment on 
desktops. 


Pop-Out and Mobile 

What started as the solution to a mobile design problem has evolved 
into a design tool for responsive websites at all viewports. 

Using a hidden menu allows main content to be more prominently 
featured, yet shifts the content area off (or nearly off) the screen when 
users access the navigation. Websites such as Facebook, Starbucks, 
and Spotify (and their associated mobile apps) are a huge reason why 
hidden navigation has thrived. 
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For Starbucks, users tap the wanted navigation element at the top of 
the screen to make the item slide up from the bottom. For Facebook 
and Spotify, revealing their navigation shifts content from left to right. 


Untitled . Sit my inline Q, US, 


The Social App 



FofltAvitiom*M. , 977’59 £ o 


Gen»r*l jMApeJtle-i 
Style 

Interatlitirri 


What will happen? 


osflcd 


Cuitem 

State 


Traditional navigation layout patterns often use too much space to be 
wholly effective; when navigational elements are labeled at the top 
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of the screen but aren’t clearly ordered, users can run into trouble. 
Hidden navigation and pop-out menus avoid this issue. The important 
factor here is that hidden navigation helps users know what to do. 
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More Room on the “First Screen” 



Photo credit: Take Your Pulse 



Photo credit: Long Story Short Design 


One of the benefits of hidden navigation is that it creates extra space 
on the main page. This clean, more streamlined viewing experience 
has been made more popular by design trends such as minimalism, 
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flat, and material design, all of which feature a sleek, simplified style 
that is free from clutter. 
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Photo credit: Studio Rotate 

Hidden menus also leave room for the navigation elements, them¬ 
selves. Instead of cramming a few labels (at small sizes) across the 
top of the screen, pop-out menus let you take all the space you need 
to highlight places users can go in the website. The design can actu¬ 
ally encompass all of that real estate. 

The end result is more room and flexibility for the overall design 
structure, and more room to focus on key navigational elements. 
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Focus on Navigational Areas 

Hidden navigation has quickly emerged as an accepted user pattern. 
The common cue is a hamburger icon at the top left or right of the 
screen. 



Photo credit: Granny’s Secret 


Think about your audience here to determine if this is enough infor¬ 
mation to help them maneuver the site with ease. Some designers 
also incorporate a text cue (such as the word “navigation” or “menu”) 
to assist users in identifying the icon, like the one in Granny’s Secret 
(above). 

And while the navigation itself is hidden, the path to it shouldn’t be. 
Make sure the element is easy to find in the user interface. Each of 
the examples below uses a different visual to help users discover the 
navigation. 
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Photo credit: University of Wisconsin 


The University of Wisconsin takes a subtle approach, using a gray 
icon paired with a traditional navigation area. The hidden navigation 
expands a more complex structure of options to help users find infor¬ 
mation about two campus locations without seeming overwhelming. 



Photo credit: 2 am Media 
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2 am Media uses a ghost button hamburger icon in the top left (that 
pops out from the right). When the menu expands, it “pauses” the 
high-energy motion in the background, allowing users to absorb the 
list of options. 



Photo credit: Vandal 

Vandal uses a high contrast hamburger icon (top right) set against 
video with dark colors. The open version of the menu uses an inverse, 
but equally contrasting, color choice. 


5 Popular Design Options 

You can “hide” navigational elements virtually anywhere, but there 
are plenty of commonly accepted user patterns emerging. Opting 
for one of these choices will make it easier for users to interact with 
your design and understand precisely what they are supposed to do. 
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Photo credit: Al Erkyah City 


1. Color: 

While the first screen may include images, video, or any other combi¬ 
nation of graphic elements, the navigation “screen” is often a one-color 
overlay with text nav links. Al Erkyah City uses a green overlay to 
help users focus on navigational choices. The color is pulled from 
the palette used across the rest of the site, but stands in contrast to 
the mostly white home screen. 




Photo credit: Wiesbaden Am Meer 
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2. Almost no other “design”: 

While many of these sites are packed with design elements, the 
navigation is lacking extra embellishment. Most of the pop-out nav¬ 
igation screens only contain menu elements in a simple text format. 
Wiesbaden Am Meer does this (above) with a striking, bright orange 
screen that needs no decoration; vivid, contrasting color choice is a 
common option. 


THE REFLEX 



Photo credit: Reflex Inc. 


3. Simple, oversized typography: 

Because of their simple text, these navigation styles naturally lend 
themselves toward beautiful typography. A common choice is simple 
lettering sized larger than necessary in relation to the space it occu¬ 
pies. (This might be a carryover from mobile aspect ratios, or just an 
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attempt to keep sites from looking empty on widescreen monitors.) 
All caps is another popular form in this style of navigation, perhaps 
because users are accustomed to header navigation links featuring 
capitalized typefaces. 

B ACCEL -■ 



Photo credit: Bvaccel 

“Hamburger” to open, “X” to close: The visual cue for nearly all hid¬ 
den navigation has become the “hamburger” icon. Many designers 
are even putting their own spin on the graphic, such as the wider, 
three-color option chosen by Bvaccel (above). 

Once users click the icon to enter the navigation, the pop-up often 
includes an “x” in the top right corner or top center to go back to the 
previous page. 
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Photo credit: Reputation Squad 


Screen “push” mimics mobile: Not all hidden navigation has to 
completely fill the screen. Remember, many mobile options overlay 
and “push” the content, but don’t completely hide it. Reputation 
Squad (above) does this nicely with a bright color navigation bar 
that is scaled to the content, while muting the main page with the 
secondary layer. 
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Takeaways 


But what about those pesky hamburger menus? It seems like almost 
every one of these designs is using them. 
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Fly-in navigation prototyped in UXPin 


There’s no way around it, the hamburger icon-love it or hate it-has 
become a familiar navigation pattern. Users tend to know what it 
means and how to work with it, so it’s OK to use in your designs. De¬ 
signers love to debate its aesthetics and whether or not it works, but 
rather than fight accepted user patterns, feel free to just go with it. 





Inspiration from Wearables 


Raise your hand if you rely on a wearable device. It could be a watch 
or fitness tracker or some other digital life helper. Chances are most 
of you own one. 

The statistics are pretty overwhelming, with tens of millions of units 
sold in 2015 alone. 

When it comes to design, the proliferation of wearables is further 
shaping the way we create interfaces for all device types. While 
wearables all come with pretty distinct styles and limitations by de¬ 
vice, plenty of concepts are finding their way back to website design. 


Streamlined Design 

The design of a wearable is simple on its face. The small screen can’t 
hold more than one piece of information. This container concept 
has been further emphasized, and popularized, by Material Design. 
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It’s an effect technique that’s popping up in all kinds of projects. The 
aesthetic may change, but the root concept is to put one idea or one 
bit of information in a container and then stack and arrange those 
containers in different ways. 



Photo credit: Adidas 


Adidas does a great job of using containers. Each element includes 
a photo collage, headline and subheader. If you hover over any part 
of the information, the hover state creates a boxed shadow. You can 
then click anywhere within the box to access the content. 


This simple interface is easy for users. It also makes cross-device 
design a breeze. 
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Effective Design In Tight Spaces 

Wearable screens are too small and sometimes offer limited color 
and awkward shapes. 

But it’s not a problem. Wearable designers are making fantastic use 
of color and typography to solve this problem with visuals that users 
want to engage with. 
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In web design, we’re also seeing more of the the highly-focused, 
stripped-down aesthetic. 


Just take a look at the site for the movie “The Lobster” above. The 
lack of color and bold typography with a distinct call to action is us¬ 
er-focused. The quiz style game is typography focused and the first 
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glimpse of art comes at the completion of the task. (But it is also risky 
if the user is disinterested in the content.) 

The concept is spilling over to websites as well with designs that 
are focused on color and type for grabbing attention and driving 
interaction. While this won’t work for every site design, it can be an 
interesting break from the norm to entice users. 


Supersized Iconography 

A core element of wearables design, icons are now also becoming 
areas of intense focus for web designs. 

Icons are perfectly suited for the space on a wearable, but when drawn 
properly (e.g. vector-based icons), they also succeed on websites as 
the dominant visual. 
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The icon has to be content-appropriate and fairly stunning to pull 
this off effectively. Otherwise, you end up with a design that looks 
incomplete. Here are a few things to keep in mind: 

• The icon should “read” small or large 

• It should work with or without color 

• Lines and details need to be precise to render well on high reso¬ 
lution displays 

• The icon must communicate a crisp message 


Streamlined Color Palettes 

The color palette pendulum is swinging in the opposite direction again. 

With the popularity of flat design in the past few years, designers 
expanded their color palettes, often using three to five bright hues. 
Now more websites are scaling back to just two colors. (And often 
one color if you don’t include black and white.) 

This started with wearables. Many of the small screens just don’t 
offer ample opportunity for massive color palettes because it would 
overwhelm users. 

That simple beauty is now being recognized and used for larger 
projects. 
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Photo credit: Troma Studio 


Trama Studio uses single color palettes to highlight information in 
its portfolio. Arguably, the website uses a wider palette because each 
“screen” uses a different color. The core concept, however, stays con¬ 
sistent: each design element has a simple, minimal color palette to 
draw the eye to important content. 
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Photo credit: Type Terms 
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Type Terms uses this same concept with a one-color design on top of 
a navy background with white text. The style is simple but conveys 
the message appropriately in a stark and minimal fashion. 


Minimalism to the Extreme 


Think about the screen on your Apple Watch or Fitbit for a moment. 


The design is quite minimalist. Now, think about an app or website 
that connects to the thing you’re looking at on the screen. If that de¬ 
sign weren’t equally minimal, it would feel off balance. 



Photo credits: Fitbit 
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Fitbit recently released a design update that streamlines and further 
minimizes the website and app dashboard design. The interface in¬ 
cludes much more white space and relies on simple charts and icons 
to display information. This simple design mimics exactly what you get 
when you use the device, creating a consistent cross-device experience. 

If the designs weren’t so intertwined, they might distract users, mak¬ 
ing them wonder if the apps or websites were even related. As more 
users want to engage with websites on more devices, the demand 
for cross-platform UX consistency will only grow. Right now, that 
translates to minimalism simply because so many wearable devices 
are built with limited screen capacities. 



Photo credit: Filip Nordin 


The good news is that minimalism is a classical design trend that 
never really gets old. Simple streamlined styles are easy for users 
to understand, look great and provide an ample opportunity for de¬ 
signers to play with the prioritized content. 
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Takeaways 

Any new device that starts to become part of the mainstream will 
always impact the design of other screen sizes. An ever-increasing 
market of design-sawy consumers demands a device-consistent ex¬ 
perience. 

With that in mind, the influence of new device types - particularly 
wearables - will only continue to grow. So if you haven’t entered the 
wearable market yet, it might be time to buy that first device even if 
you are only using it to keep an eye on design trends. 



Material Design Lite 


Without a doubt, touches of Material Design are the must-have aes¬ 
thetic of the year. Google’s Android-based design scheme may have 
started as a mobile device interface, but has exploded in popularity 
and usage, regardless of device or platform. 

It’s a natural continuation of the biggest trend in design during the 
past few years: flat design. Yet, Material does something flat never 
could, it adds just enough embellishment to enhance usability. In¬ 
stead of stripping everything away to favor visual appeal, at the root 
of Material Design is usability. 
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What’s MDL? 



Photo credit: Paypol 
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Photo credit: Android 


Material Design Lite, or MDL, is the next phase of Material Design. 
It takes the ideas and optimizes them for all devices. MDL has been 
crafted to include guidelines, components, and an overall framework 
with templates and tools that help nearly every designer craft an MDL 
website with minimal prior knowledge up front. 
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MDL essentially makes the concept accessible to everyone in a quick 
and easy way. 

While MDL may be a variant of “classic” Material Design, it is in no 
way a lesser version. Most sites designed with MDL are robust, easy 
to use, and visually pleasing. 

The idea of MDL goes back to the mission of Material Design as a 
whole: “Develop a single underlying system that allows for a unified 
experience across platforms and device sizes. Mobile precepts are 
fundamental, but touch, voice, mouse, and keyboard are all first-class 
input methods.” 

If that weren’t enough, every part of MDL is open source. Rules, tem¬ 
plates, best practices, and code snippets are available on the MDL 
website or GitHub. 
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Principles of Physics 
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Photo credit: Rumchata 


The foundations of this style’s aesthetic come from physics. The de¬ 
signer should aim to create something that looks and functions like 
it would (or could) in the physical world. 


This simple concept is what supports to the innate usability of Ma¬ 
terial. Consider all of the design tools that rely on this idea-layering, 
cards, motion, color. 



Photo credit: MDF 
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Photo credit: Serio Verify 


To understand how to create these elements in a way that looks truly 
Material, let’s think back to physics class, for a moment. 

• Varying x and y dimensions are recommended, but all elements 
should have a uniform thickness. 


• Shadows should fall naturally on the z-axis, seemingly from a 
natural light source. 

• Content can appear on any plane, in any color or shape. 

• Material components are solid and have no transparencies. 

• Each space is limited to a single component; they can’t overlap. 
Layering is only acceptable with backgrounds and photo elements, 
not singular components. 

• Components can shrink and expand, but not bend or break. They 
have a fluidity to their movements. 









Material Design Lite 34 


• Components can split or be combined. 

• Motion can occur on any axis and should be dictated by user in¬ 
teraction. 

Mix and Match Components 



Photo credit: wrk. 


MDL is packed with user friendly tools to help start the design pro¬ 
cess. While the visual design is primarily what you see,, what makes 
Material Design Lite different is in the backbone. 

MDL is not JavaScript-based; it is designed to work on all devices, 
degrade in older browsers, and provide cross-platform accessibility. 
You don’t necessarily need to know how it works, but there is one 
vital takeaway you should remember: MDL will work pretty much 
everywhere. And that’s by design. 
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Photo credit: Google Developers 


The easiest way to start with MDL is to pick a template. Each template 
(there are six to choose from) comes with everything you need for the 
design, including the components and color palettes. But the beauty 
of MDL is that you can customize as much as you like. The templates 
are merely a starting point. 

In addition to templates, MDL has a massive component library that 
lets you mix and match pieces to create something uniquely yours. 
(You can grab just code snippets for only the components you like to 
keep your website lightweight.) 

While these parts are a lighter, easier to manage version of Material, 
all of the basic elements are the same, including typefaces (Roboto), 
layer styles and elements, and color palettes. Almost any element 
can be added to a design or removed. You can even include elements 
of MDL in a site that’s not fully Material, if you want to experiment. 
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Material Color Palettes 

One of the most visual aspects of MDL are the associated color pal¬ 
ettes. Material projects are often bright and bold in color. Hues are 
deeply saturated and color combinations can be a little unexpected. 



Photo credit: Get MDL Custom CSS Theme Builder 


Material color is often based on a palette that consists of a primary 
color and one accent. (You’ll want to choose wisely.) 
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Photo credit: Dropbox Business 
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Dropbox Business is a classic example of a website that adopts design 
concepts early, yet maintains brand identity. Luckily, their branded 
blue is perfect for Material. Here, the site uses a single color palette 
with black and white to communicate. (This is quite common with 
MDL, as brands work to maintain identity while using the style.) 
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Photo credit: Pumperl gsund 


The site for Pumperl gsund takes the opposite approach and goes 
all in with two bright colors. Note again how color is used against a 
mostly minimal background, with black and white for everything else. 



Photo credit: Fila 
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While MDL projects can feature big, bold color throughout (such as 
Fila, above), this can be tricky to pull off with finesse. You need just 
the right content to make it work well. In this case, Fila had the per¬ 
fect combination of elements to go big with color thanks to a colorful 
athletic clothing line. 


Takeaways 

Material Design Lite is a more usable, more flexible version of Mate¬ 
rial Design, and one that you can implement in whole or in part for 
almost any website design. It offers overall functionality, focus on 
usability, and design known for clean lines and organization. 

Download a template or just the code for any components you want 
to try - go give it a whirl. 


Split-Screen Design 
(Desktop Stacked on Mobile) 


One screen. Two messages. 

Split-screen design is a fun technique for creating a versatile layout-a 
cool side-by-side, panel-style aesthetic for desktop viewpoints that 
then collapses to stacked elements on mobile/smaller devices. 
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Photo credit: Watch Trop Fest 


What’s nice about split screens is that an almost unlimited numbers 
of combinations are possible when you start to play with the design. 
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Split-screen designs often follow a symmetrical format (although 
it’s not a requirement), using a vertical divider in the middle of the 
screen. Each side features a separate contained element, such as a 
photo, text block, or illustration. 
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Photo credit: My Trans Health 

We’re going to break down some of the options for split-screen design 
so you can make the most of this technique. 
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Consider Content 

Split-screen aesthetics work particularly well with certain types of 
content. It’s important to understand that users will make a visual 
connection between paired items, so you should see it as an almost 
yin and yang concept. Because of this, make sure your content is de¬ 
signed to complement and benefit from a “paired” format. 
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Photo credit: One of a Kind 


1. Two elements of equal importance: 

Do you have a shared message? The website for One of a Kind Chicago 
does a great job highlighting two events in the split-screen format. 
It immediately provides a second option for people who might not 
be able to attend one of the dates, saving them from searching the 
website for alternatives. 
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Photo credit: The Square Apartments 


2. Eyetrack patterns: 

Images and color choices can provide sharp directional flow, meaning 
split-screen design can direct users in how they should move through 
the design. The Square Apartments (above) uses a photo and text pair 
to force from the image to the message. 



Photo credit: Type & Face 









Split-Screen Design (Desktop Stacked on Mobile) 43 


3. Highlight duality: 

Sometimes messaging isn’t enough to convey what you do. Emphasiz¬ 
ing duality can provide more focus and uniquely connect elements 
of a brand or business. Just ensure that you’ve established a connec¬ 
tion between each element, otherwise you’ll highlight the sense of 
disconnect you’re trying to avoid. 
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Photo credit: Xavier Bourdil 



4. User options: 

Split screens offer choice and control to users: Which link (or side) 
will get clicked first? What content is most appealing to explore? The 
click patterns and analytics behind these actions provide valuable 
data that can help shape future design and content decisions. 
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Pair Bright Color and Cool Typography 

Split-screen design can be the perfect tool for those times when you 
just don’t many visuals to work with. Bright colors and interesting 
typography pairs can add interest without looking like something is 
missing. 



INSIGHTS PRINTING & 

& MARKETING FULFILLMENT 


Photo credit: Baesman 

Baesman (above) uses a pair of bright colors and two different head¬ 
lines to hook users. Despite background video, it’s color and bold type 
that draws the user in. Hovering over one of the sections makes the 
other side fade to gray, enticing users to interact. 


The same bold, bright color-blocking is used throughout the site bring 
attention to the messaging and enhance readability. 


CONNECT 
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Think of “Screens” as Cards 


SPECTRUM 



Photo credit: Niko Skoulis 


Split screen websites also tend to share a card-based concept. Think 
of the similarities: 


• Every screen is a container that houses one message and one ac¬ 
tion for users. 

• These “containers” can live side-by-side or collapse into a vertical 
format. 

• Each container works as a standalone element-but gains meaning 
when paired with other containers. 
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stikwood Products Inspiration About Q. Q login 



Photo credit: Stikwood 


Stacking patterns vary, with no rule requiring a split into two perfect 
pieces. Notice that Stikwood’s design (above) features a side divided 
into smaller pieces. This provides more user entry points. Consider 
stacking elements using mosaic or masonry style patterns, or creating 
movable patterns to mix and match elements via scrolling techniques 
such as AJAX or parallax. 


Create Visual Flow Between “Screens” 

While split-screen design patterns can leave you with distinctly differ¬ 
ent elements, there must be a connection between content containers. 
For the most impact, unify the sides of a split-screen aesthetic; this 
creates organization and engages users. 
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Photo credit: Bump 


1. Connect with color: 

Duplicate a distinct color to establish visual flow from one “screen” 
to the other. This works particularly well with a brand color, or hue 
with a lot of contrast (such as the Bump charger (above) and the ad¬ 
jacent panel’s call to action button. 



Photo credit: Sewage Free Seas 
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2. Overlap elements: 

Layering a single element across screens can provide an additional 
level of cohesion and flow. In other words, “split screen” elements can 
overlap. Sewage Free Seas (above) uses a headline that touches both 
the image and message, leaving a distinct left to right visual pattern. 



Photo credit: Renate Rechner 


3. Do something unexpected: 

Most designers want to provide a little surprise for users that keeps 
them interested. While your trick might not be as obvious as the up¬ 
side down text on the Renate Rechner website, this is just the kind 
of detail that makes an impression on users. 
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Takeaways 

Split-screen website designs are a fun, functional, (and responsive) way 
to create an engaging design that stands out. The concept of pairing 
interchangeable parts for a seamless user experience is key, rather 
than focusing on color and typeface choices, or how to use images. 

While it might be hard at first to get away from perfect symmetry 
with this style, reach beyond your comfort zone and match elements 
in different ways on the grid. Then take it another step and combine 
a split-screen pattern with other trends-such as flat 2.0 or minimal- 
for a funky, modern style. 


Video, Video, and More Video 


One of the fastest growing elements in website design is the use of 
video. From full-screen moving images to pop-ups and embedded vid¬ 
eo from social media, video is a must-have when it comes to content. 

Video can provide users with a glimpse into your world. The good 
ones hook users, making the experience immersive and keeping 
them on a website longer. Since seamless video is now possible on 
almost any device and in any environment thanks to universally 
faster internet connections (even on cellular networks), the reasons 
to use video are compelling. 


Video as a Dominant Visual 

In terms of popularity, full-screen video featured in a header-style 
“hero” format is chosen for most use cases. This format spans the top 
of the screen from edge to edge, often with a content overlay that 
includes a headline and call to action. Navigational elements may or 
may not be layered on top of the video. 
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These video headers tend to be one of five types: 



Photo credit: Papazian 


1. A single video is looped in the background as a visual element, 
without audio or integration into the rest of the website. 



Photo credit: Design Hotels 







Video, Video, and More Video 52 


2. Montage. A series of short clips are strung together, then looped 
in the background as a visual element. 
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Photo credit: The Revenont 


3. Short movie. A cinematic video with sound and a storyline is a 
popular choice to promote movies, such as this example from 
The Revenant (above). 



Photo credit: Muller 
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4. Interactive video experiences. The user follows a story and 
makes choices via clicks or taps to influence the outcome. 



Photo credit: Bundy 

5. The “non-video.” This technique is made to resemble a still im¬ 
age at first glance, using only subtle movements to signify it as 
a video. The most popular use of this technique is with back¬ 
grounds (often nature based) where slight movement, such as 
the rustling of leaves, can be seen. 
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Professional Quality Wanted 



Photo credit: NERC 


The “rules” for video aren’t fundamentally different from those for 
large photos. Consider the basic principles of color theory, typography, 
space, and contrast, and you’ll likely find success. 

Quality is of primary concern; don’t even consider using video unless 
it is high definition and has top-notch production values. It needs to 
render crisply at high resolutions, as well as convey a professional 
look and feel, from the images captured to its framing and editing. 

The caveat is that you’ll likely need to hire a pro to do this for you. 
If you aren’t a videographer, budget for one in design projects. They 
can obtain the best imagery for you, edit the design to scale, and help 
compress files using tricks that don’t hurt the integrity of the images. 
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Create Contrast 
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Photo credit: Panopoly 


Good video makes a great first impression-another reason it’s so 
trendy-and establishes contrast between content elements and im¬ 
agery. 

Contrast is used to establish flow and guide users through the content. 
It can be established in a few different ways: 

1. Color: 

Elements layered on top of video should remain easy to read, so they 
need to have enough contrast to appear distinct. This can be a chal¬ 
lenge. Because the moving nature of the “picture” creates a challenge, 
opt for clips with minimal color variance between light and dark, or 
consider a color overlay. 

2. Multiple videos: 

Play with content. Users will appreciate seeing something new when 
they visit your website, so establish contrast and interest using mul- 
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tiple videos that play at different times. 

3. Still elements vs. motion: 

Because video is such a striking feature, elements sharing the UI need 
to be (and appear) still. This comes back to simplicity. Use typefaces 
without a lot of slant or implied motion; create buttons and elements 
that aren’t overly-animated; and stick to simple elements, in general. 
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Photo credit: Humboldt County 


Humboldt County (above) uses multiple elements layered on top of 
video to encourage tourism. In their impressive Alice in Wonder- 
land-style video, there’s a great deal of contrast between text elements. 
The background video is also enticing, and there’s a nifty call to action 
button. Users can easily see and read the text, find the button with 
ease, and all while continuing to watch the video. 
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What About Sound? 
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Photo credit: Eyezen Challenge 


Auto-play sound is intrusive and can be jarring for some users. When 
it comes video and sound, the rule of thumb has always been “turn 
it off.” 


That being said, a surprising number of video-based websites are 
taking a chance and using auto-play sound with video. It’s a giant risk 
that you might find rewarding if sound is a vital part of your content. 

That said, video without audio is a commonly accepted user pattern. 
A recent report on Facebook video shows that 85 percent of users 
watch video without sound - a whopping percentage! It’s easy to 
infer that they watch other videos the same way, no matter which 
website they’re on. 
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Video and Interactive Adventure 



Photo credit: Converse 


While use of video has been growing steadily, the emerging trend 
is interactive storytelling. Websites are increasingly starting to mix 
video and user controls to create a story. 


The overall effect is captivating: it’s part video, part animation, and 
a lot of CSS magic. The three combine to become a gamified journey 
that engages users, keeping them on your website and exploring 
your content. 


The experience designed by Converse (above) takes you on a journey 
that feels realistic: you climb a tower, hack a billboard, and track 
your footsteps and heart rate during the athletic journey. Users con¬ 
trol actions that become integrated with video of the event (which 
is actually happening). It’s a technique that steers users toward the 
company’s key goal-selling shoes that are hip and cool. 
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Takeaways 

Video is a great tool to draw users into a website and generate a lot of 
interest. The important things to remember are that video must be of 
high quality, pair with easy-to-understand and contrasting elements, 
and provide an experience that users will enjoy. 

It’s OK to take risks such as including sound and interactive game- 
play, but be aware that these concepts might not appeal to all users. 
Experiment, have fun and start brainstorming ways to use moving 
images as a dominant part of your content plan. 



What’s Next? VR 


The next screen you design might not be a screen at all. The next 
frontier of digital design appears to be virtual reality, also called VR 
or immersive design. 

It’s a whole new way of thinking about and planning a design, and is 
more like gaming than any other type of project out there. The first VR 
products are already on the market - you can spend anywhere from 
$15 for Google’s Cardboard design or $600 for the much-anticipated 
Oculus Rift, which has an anticipated ship date of August. 

With both Google and Mozilla hard at work to adapt VR for the web, 
what implications does the platform pose for designers? 
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What is VR? 



Photo credit: Samsung 


So what is virtual reality anyway? Isn’t it just a gaming platform? 

VR is the creation of a seemingly real environment, where users can 
interact with the interface using special equipment, such as a screen 
encased in special eyewear, a helmet, gloves or other hand-held con¬ 
trols. The digital environment is designed to feel real so that the user 
becomes immersed in the VR world and forgets what is happening 
around them. 

It’s not just for gaming, although that’s where a lot of the hype is now. 
Honestly, there are so many ideas floating around out there and the 
technology is so new that we aren’t exactly sure what it might look 
like a year from now. 

Designing for VR can be tricky. 

The quasi-reality of a web screen can be tough to replicate and take 
a lot of time and money. Users complain of feeling “seasick” after in¬ 
teracting with the devices. Others complain that the experience still 
feels weird. The root of these issues can be linked back to the design. 
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Create the Right Scale 
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Photo credit: A Frame 


When it comes to mimicking 3D reality, what’s on the screen must fit 
the scale of life. On computers and mobile devices, users don’t expect 
a person to be life-sized. In VR, they do. 

For designers, this creates a whole new scale of responsiveness that 
can vary by device type. It can also vary by where in the VR world 
the subject is located. Movements and actions should work in space 
so that they get bigger as they move closer and vice versa. 

Then there’s the scale of interaction. Users are accustomed to clicking 
buttons to perform actions in the digital landscape. This concept is 
still evolving in VR. What are the buttons? Where are they located? 
And how do users access them with ease? 
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Maintain Some Distance 
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Photo credit: Livyatanim 

So much of what we see and design on screens is accepted. In 2D 
design, color, size and contrast tell the user what they need to know 
about the experience. In VR, it’s more about the perspective between 
space and time - distance. 

The distance between the user and the perceived VR environment 
is what tells him or her how to interact with the device. Is the action 
far away or up close? It is in the direct field of vision or periphery? 

The answers to these questions will help a user determine how to 
interact. Remember with VR, you aren’t just designing one flat screen 
in front of the user. It can be curved and molded around their eyes 
or even be a full 360-degree view of a virtual world. 
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It’s All About the Experience 



Photo credit: Google Cardboard 

When we look back on VR two, five or even 10 years from now, its 

success will be determined by how users felt about the experience. 

Did it feel real and comfortable? Did it provide clear value? 

When thinking about VR design, considering experience is visually 

just as important as the physical aspect. A few core principles: 

1. Be aware of movements that could make people feel sick, such 
as overly fast motion. 

2. The horizon and static objects should provide a constant point 
of reference. 

3. Design the experience so that the user can “see” without need¬ 
ing to spin their head around. 

4. Think about brightness and coloring of objects; be aware of too 
much light pounding the user in a closed environment. 

5. Elements should look and feel real - or not - but don’t mix and 
match. 
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Takeaways 

Virtual reality is a hot topic. And right now there are a lot of unknowns. 

It is neat to think about. It’s inspiring to consider the design possi¬ 
bilities that could come from it. But the real test is always the users. 
Will they want to put their phones in cardboard boxes? 

Only time will tell. 
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